<template>
  <div class="policy">
    <h2>高考政策信息</h2>
    <div class="container">
      <div class="wrapper">
        <div class="item"
             v-for="(item,index) in tableDate" :key="index+1"
             :class="{active: index === selected}"
             @mouseenter="selected = index" @mouseleave="selected = ''"
        >
          <a :href="item.link">
          <p class="title">{{item.polid}}</p>
          <p class="text" >{{item.polname}}</p>
<!--            <button @click="btnClick(item.policies)" >显示</button>-->
<!--            <div v-if="isshow">{{item.policies}}</div>-->
<!--            <button @click="isshow = !isshow">点击</button>-->
            <el-button type="text" @click="dialogVisible = true">点击查看</el-button>
            <el-dialog
              title="详情"
              :visible.sync="dialogVisible"
              width="76%"
              :before-close="handleClose">
              <span>{{ item.policies }}</span>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
          </a>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import request from '../utils/request'
export default {
  data () {
    return {
      loading: true,
      tableDate: [],
      selected: '',
      dialogVisible: false
    }
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      this.loading = true
      request.get('api/policy', {
      }).then(res => {
        this.loading = false
        this.tableDate = res.data.records
        this.polname = res.data.records.polname
        console.log(this.tableData + '11')
        console.log(res.data.records)
        console.log(this.polname)
      })
    },
    btnClick: function (poid) {
      this.policies = poid
      console.log(this.policies)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }

}
</script>

<style lang="scss" scoped>
.policy{
  width: 1226px;
  margin: 0 auto;
  background: #f5f5f5;
  padding-top: 20px;
  h2{
    font-size: 50px;
    font-weight: 200;
    line-height: 50px;
    margin-left: 20px;
    color: #333;
  }
  .container{
    padding-top: 40px;
    width: 1226px;
    margin: 0 auto;
    .wrapper{
      display: flex;
      justify-content: space-between;
      align-content: space-between;
      .active{
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        margin-top: -1px;
        transition: all .2s linear;
      }
      .item{
        position: relative;
        overflow: hidden;
        //height: 300px;
        width: 234px;
        color: #333;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        .title{
          margin-top: 10px;
          font-size: 20px;
          font-weight: 400;
          margin-bottom: 15px
        }
        .text{
          color: #000000FF;
          font-size: 24px;
        }
        .price{
          color: #ff6709;
          font-size: 14px;
          margin-top: 10px;
          margin-bottom: 15px;
        }
      }
    }
  }
}
</style>
